<template>
  <div>
    <el-table v-loading="loading" :data="customerList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="主键ID" align="center" prop="id" />
      <el-table-column label="客户名称" align="center" prop="name" />
      <el-table-column label="所在城市" align="center" prop="city" />
      <el-table-column label="邮箱" align="center" prop="email" />
      <el-table-column label="详细地址" align="center" prop="address" />
      <el-table-column label="负责人" align="center" prop="personInCharge" />
      <el-table-column label="联系方式" align="center" prop="phone" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="修改时间" align="center" prop="updateTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建人" align="center" prop="createBy" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['basic:customer:edit']">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['basic:customer:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  loading: {
    type: Boolean,
    required: true
  },
  customerList: {
    type: Array,
    required: true
  }
});

const emit = defineEmits(['handleSelectionChange', 'handleUpdate', 'handleDelete']);

// 多选框
const handleSelectionChange = (selection) => {
  emit('handleSelectionChange', selection);
};

// 修改按钮
const handleUpdate = (row) => {
  emit('handleUpdate', row);
};

// 删除按钮
const handleDelete = (row) => {
  emit('handleDelete', row);
};
</script>

<style scoped>
</style>